<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, minimal-ui">
<title>投票记录查询页</title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="vendor/swiper/swiper.min.css">
<link rel="stylesheet" href="vendor/simplelightbox/simplelightbox.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> 
</head>
<style>
	td
	{
		white-space: nowrap;
		text-align: center;
		vertical-align:middle;
	}

</style>
<body>
<!-- Overlay panel -->
<div class="body-overlay"></div>
<!-- Left panel -->
<div id="panel-left"></div>
<!-- Right panel -->
<div id="panel-right"></div>

<div class="page page--main" data-page="photos">
	<!-- PAGE CONTENT -->
	<div class="page__content page__content--with-header page__content--with-bottom-nav">
		<h2 class="page__title">投票记录查询</h2>
		<div class="search__form" >
			<form novalidate onkeydown="if(event.keyCode==13){return false;}" style="color: #c1c1c1">
				<input autocomplete="off" type="text" name="prizeName_info" id="prizeName_info" class="layui-input" style="width: 12em;" placeholder="奖项名" value="">
				<input type="text" id="displayLength" name="displayLength" class="layui-input" style="display: none;" placeholder="每页页数" value="6">
				<button id="searchBtn" type="button" class="layui-btn" lay-submit="" lay-filter="searchBtn">搜索</button>
			</form>
		</div>
		<table class="layui-table" lay-skin="" id="fillingResume" style="width: 100%;">
			<thead>
			<tr style="background-color: #c1c1c1">
				<th style="text-align: center;color: black">奖项名</th>
				<th style="text-align: center;color: black">投票时间</th>
				<th style="text-align: center;color: black">状态</th>
				<th style="text-align: center;color: black">你的选择</th>
			</tr>
			</thead>
			<tbody id="voteTable"></tbody>
		</table>
		<div style="flex: 1" align="center">
			<div class="pageNav">
               <span class="layui-breadcrumb" lay-separator="-" style="color:white;">
                 <a class="fristPage">首页</a>
                 <a class="lastPage">上一页</a>
                 <a><cite>第<span id="page"></span>页</cite></a>
                 <a class="totalPage"><cite>共<span id="total">0</span>页</cite></a>
                 <a class="nextPage">下一页</a>
                 <a class="endPage">尾页</a>
               </span>
			</div>
		</div>
	</div>


</div>
<!-- PAGE END -->
<!-- Bottom navigation -->
<div id="bottom-toolbar-photos" class="bottom-toolbar">
	<div class="bottom-navigation">
		<ul class="bottom-navigation__icons bottom-navigation__icons--centered gallery-switch">
		<li data-photos="11"></li>
		</ul>
	</div>	  
</div>

<!-- Social Icons Popup -->
<div id="popup-social"></div>
 
<!-- Alert --> 
<div id="popup-alert"></div>  

<!-- Notifications --> 
<div id="popup-notifications"></div>  

<script src="vendor/jquery/jquery-3.5.1.min.js"></script>
<script src="vendor/jquery/jquery.validate.min.js" ></script>
<script src="vendor/swiper/swiper.min.js"></script>
<script src="vendor/simplelightbox/simplelightbox.js"></script>
<script src="js/jquery.custom.js"></script>
<script src="../static/js/check.js"></script>
<script src="layui/layui.js"></script>

<script>
	var layer = layui.layer;
	var displayStart = 1;
	var endPage = null;

	//查询奖项
	searchVote(1)
	$('#searchBtn').click(function () {
		searchVote(1)
		return false;
	})
	$('.fristPage').click(function() {
		searchVote(1);
		return false;
	});
	$('.lastPage').click(function() {
		searchVote((displayStart > 1 ? displayStart - 1 : 1));
		return false;
	});
	$('.nextPage').click(function() {
		searchVote((displayStart < endPage ? displayStart + 1 : endPage));
		return false;
	});
	$('.endPage').click(function() {
		searchVote(endPage);
		return false;
	})

	//奖项查询具体方法
	function searchVote(index) {
		if (!index) var index = displayStart;
		$.ajax({
			url: '' + '/vote-info/listVoteInfo',
			method: 'POST',
			contentType: 'application/json',
			data: JSON.stringify({
				displayStart:index,
				displayLength:$('#displayLength').val(),
				userName:sessionStorage.getItem('userName'),
				ghid:sessionStorage.getItem('workerNo'),
				prizeName:$('#prizeName_info').val()
			}),
			success: function(res) {
				$('#voteTable').empty();
				displayStart = res.data.current;
				endPage = res.data.pages;
				for (var i = 0; i < res.data.records.length; i++) {
					$('#voteTable').append(
							"<tr>" +
							"<td  style='color: #01AAED'>" + res.data.records[i].prizeName + "</td>" +
							"<td  style='color: #01AAED'>" + res.data.records[i].createTime.split('T')[0] + "</td>" +
							"<td>" +voteStatus(res.data.records[i].status)  + "</td>" +
							"<td  style='color: #01AAED'>" + res.data.records[i].voteNomineeName + "</td>" +
							"</tr>"
					);
				}
				if(res.data.records.length==0){
					$('#total').html(0)
				}else{
					$('#total').html(Math.ceil(res.data.records[0].total/Number($('#displayLength').val())))
				}
				$('#page').html(displayStart)
			}
		})
	}

	function voteStatus(index) {
		switch (index) {
			case '0':
				return '<strong style="color: #ff1919;">已结束</strong>';
			case '1':
				return '<strong style="color: #389E0D;">进行中</strong>';
		}
	}

	$(document).keydown(function (event) {
		if(event.keyCode==13){
			$("#searchBtn").click()
		}
	})

</script>

</body>
</html>